<template>
  <div class="main">
    <LsdDialog @handleBtn="handleBtn" :dialogConfig="dialogConfig">
      <div slot="dialog" class="flow_box">
        <div class="left_unit">
          <div class="serch_box">
            <el-input @input="treeSerch"  v-model="orgName" placeholder="请输入关键字搜索"></el-input>
          </div>
          <div class="tree_box">
            <el-tree ref="tree" :filter-node-method="filterNode" accordion :current-node-key="defaultCheck" node-key="id" :default-expanded-keys="defaultShowNodes"
              highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
        </div>
        <div class="right_account">
          <filterTitle>
            <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
              <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index"
                 :prop="item.id">
                <LsdForm :compData="item" :form="form" @node-click="handleSelectTree(arguments, item)"
                  @change="selectChange(arguments, item)" />
              </el-form-item>
            </el-form>
          </filterTitle>
          <div class="account_list">
            <LsdTable slot="yjrwlb" :multiple="table.multiple" :paginationAtrrs="table.paginationAtrrs" :compRef="table.compRef" ref="yjrwlb" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @select="select" @selection-change="select" @onActionClick="onActionClick" />
          </div>
        </div>
      </div>
    </LsdDialog>
  </div>
</template>

<script>
import { tree, getAccountByOrg} from "@/api/SystemConfig/organization";
export default {
  components: {},
  props: {
    // 默认进来显示的部门
    orgId: {
      type: String
    },
    // 判断是否可以多选
    multiple: {
      type: Boolean
    }
  },
  data() {
    return {
      form: {},
      selectList: [],
      orgName: "",
      dialogConfig: {
        title: "下一步操作人选择",
        isShow: false,
        type: "",
        width: "70%"
      },
      defaultShowNodes: ["1533835007229984"],
      defaultCheck: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "orgName",
        value: "id"
      },
      // 折叠面板
      titleConfig: [
        {
          title: "筛选条件",
          name: "1",
          slot: "slot1"
        },
        {
          title: "人员列表",
          name: "2",
          slot: "slot2"
        }
      ],
      activeNames2: ["1", "2"],
      // 列表筛选
      formData: [
        {
          elType: "input",
          id: "noticeOrderName",
          label: "人员名称",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          }
        }
      ],
      // 列表表格
      table: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        isSequenceFlag: true,
        isShowPage: false,
        resetFlag: true,
        loading: false,
        title: "",
        actions: [
          {
            id: "submit",
            text: "确认",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "accountName",
            label: "账户名称",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "realName",
            label: "账号",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "orgType",
            label: "所属机构",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "level",
            label: "机构级别",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "gxsj",
            label: "更新时间",
            align: "center",
            "min-width": "90px"
          }
        ],
        tableAttr: {
          // "max-height": `${window.innerHeight - 100}px`,
          height: `${window.innerHeight - 385}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      }
    };
  },
  watch: {
    "dialogConfig.isShow": {
      handler(val) {
        if (val) {
          this.getOrgTree("1533835007229984");
          this.orgName = "";
        }
      }
    }
  },
  mounted() {
    this.table.multiple = this.multiple || false;
  },
  methods: {
    // 组织机构树查询
    async getOrgTree(id) {
      try {
        const parmas = {
          pid: id
        };
        await tree(parmas).then((res) => {
          this.data = res;
          this.$set(this, "defaultCheck", this.orgId || res[0].children[0].id);
          this.getXsjgAcount(this.orgId || res[0].children[0].id);
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 查询机构下账户
    getXsjgAcount(id) {
      getAccountByOrg(this.common.convertFormData({ orgId: id })).then(res => {
        this.table.tableData = res;
      });
    },
    handleNodeClick(data, node, item) {
      this.getXsjgAcount(data.id);
    },
    handleBtn(item) {
      this[item.id]();
    },
    // 树筛选
    treeSerch(value) {
      this.orgName = value;
      this.$refs.tree.filter(value);
    },
    // 组织机构过滤筛选
    filterNode(value, data) {
      if (!value) return true;
      // if (data.orgName) {
      return data.orgName.indexOf(value) !== -1;
      // }
    },
    cancel() {
      this.ChooseConfig.isShow = false;
    },
    select(val) {
      this.selectList = val;
    },
    onActionClick(item, index) {
      this[item.id]();
    },
    submit() {
      console.log(this.selectList, "----selectList");
      this.$emit("handleFlow", this.selectList);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../assets/style/common.less";
@import "../assets/style/ComponentStyle.less";
@import "../assets/style/pop-upNotification.less";

//@import url(); 引入公共css类
.flow_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;

  .left_unit {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #eee;

    .serch_box {
      width: 100%;
      height: 7%;
      background-color: #3561fd;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .tree_box {
      width: 100%;
      flex: 1;
      overflow: scroll;
    }
  }

  .right_account {
    width: 74%;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;

    .list_serch {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 5%;

      .label {
        width: 20%;
      }
    }
    .account_list{
      flex: 1;
    }
  }
}

:deep(.el-dialog) {
  height: 75% !important;
}

:deep(.el-dialog__wrapper) {
  top: -120px !important;
}

.main :deep(.el-dialog__body) {
  height: 94.5% !important;
  padding: 0 !important;
}

.serch_box:deep(.el-input__inner) {
  border-radius: 20px;
}
</style>
